<template>
<Card>
	<Tabs size="small">
		<TabPane label="商品库管理" pd1>
			<Button @click="handleShowCreateCommodityWareModal(null)">新增商品库</Button>
			<table class="minitable" text-center long mgt2>
				<tr bg-gray5>
					<td w1>#</td>
					<td text-left>商品库名称</td>
					<td w6>排序</td>
					<td w6>操作</td>
				</tr>
				<tr v-for="(item, index) in commodityWares" :key="index">
					<td>{{ index + 1 }}</td>
					<td text-left>{{ item.displayName }}</td>
					<td>
						<Button type="text" size="small" shape="circle" icon="md-arrow-round-up" :disabled="index==0" @click="handleSortUpCommodityWare(item.id)"></Button>
						<Button type="text" size="small" shape="circle" icon="md-arrow-round-down" :disabled="index==commodityWares.length-1" @click="handleSortDownCommodityWare(item.id)"></Button>
					</td>
					<td>
						<Button type="primary" size="small" @click="handleShowCreateCommodityWareModal(item)" mgr1>编辑</Button>
						<Button type="error" size="small" @click="handleDeleteCommodityWare(item.id)">删除</Button>
					</td>
				</tr>
			</table>
		</TabPane>
		<TabPane label="商品参数管理">
			<p sz0>
				<span mgr1>选择产品库</span>
				<Select v-model="selectedCommodityWareId" size="small" style="width:150px;" mgr2 @on-change="handleCommodityWareSelectChange">
					<Option v-for="(item, index) in commodityWares" :key="index" :value="item.id">{{item.displayName}}</Option>
				</Select>
				<Button size="small" @click="handleShowCreateParameterModal(null)">新增商品参数</Button>
			</p>
			<table class="minitable" text-center long mgt2>
				<tr bg-gray5>
					<td w1>#</td>
					<td text-left>商品参数名称</td>
					<td w6>排序</td>
					<td w6>操作</td>
				</tr>
				<tr v-for="(item, index) in parameters" :key="index">
					<td>{{ index + 1 }}</td>
					<td text-left>{{ item.displayName }}</td>
					<td>
						<Button type="text" size="small" shape="circle" icon="md-arrow-round-up" :disabled="index==0" @click="handleSortUpParameter(item.id)"></Button>
						<Button type="text" size="small" shape="circle" icon="md-arrow-round-down" :disabled="index==parameters.length-1" @click="handleSortDownParameter(item.id)"></Button>
					</td>
					<td>
						<Button type="primary" size="small" @click="handleShowCreateParameterModal(item)" mgr1>编辑</Button>
						<Button type="error" size="small" @click="handleDeleteParameter(item.id)">删除</Button>
					</td>
				</tr>
			</table>
		</TabPane>
	</Tabs>
	
	<Modal v-model="showCreateCommodityWareModal" :title="commodityWareModel.id?'修改商品库':'添加商品库'" :mask-closable="false">
		<Form :ref="commodityWareFormRef" :model="commodityWareModel" :label-width="100">
			<!-- <FormItem label="唯一名称" prop="name" required>
				<Input v-model="commodityWareModel.name" :disabled="!!commodityWareModel.id" />
			</FormItem> -->
			<FormItem label="名称" prop="displayName" required>
				<Input v-model="commodityWareModel.displayName" />
			</FormItem>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleCreateCommodityWare">{{commodityWareModel.id?'保存':'添加'}}</Button>
            <Button @click="showCreateCommodityWareModal=false">取消</Button>
        </div>
	</Modal>
	
	<Modal v-model="showCreateParameterModal" :title="parameterModel.id?'修改商品参数':'添加商品参数'" :mask-closable="false">
		<Form :ref="parameterFormRef" :model="parameterModel" :label-width="100">
			<!-- <FormItem label="唯一名称" prop="name" required>
				<Input v-model="parameterModel.name" :disabled="!!parameterModel.id" />
			</FormItem> -->
			<FormItem label="名称" prop="displayName" required>
				<Input v-model="parameterModel.displayName" />
			</FormItem>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleCreateParameter">{{parameterModel.id?'保存':'添加'}}</Button>
            <Button @click="showCreateParameterModal=false">取消</Button>
        </div>
	</Modal>
</Card>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'

@Component
export default class CommodityWareManager extends AbpBase{
	showCreateCommodityWareModal:Boolean = false;
	commodityWareFormRef:string = this.getRandomRef('CommodityWare-form');
	commodityWares:Array<any> = [];
	commodityWareModel:any = this.getDefaultCommodityWareModel();
	getDefaultCommodityWareModel() {
		return {
			name: '',
			displayName: ''
		}
	}
	handleShowCreateCommodityWareModal(item) {
		if(item == null) {
			this.commodityWareModel = this.getDefaultCommodityWareModel();
		}else {
			this.commodityWareModel = Object.assign({}, item);
		}
		this.showCreateCommodityWareModal = true;
	}
	handleCreateCommodityWare() {
		this.commodityWareModel.name = this.commodityWareModel.displayName;
		this.validate(this.commodityWareFormRef, async () => {
			if(!this.commodityWareModel.id) {
				var response = await this.post('CommodityWare/CreateWare', this.commodityWareModel);
				if(response.success) {
					this.handleGetCommodityWares();
					this.showCreateCommodityWareModal = false;
				}
			}else {
				var response = await this.put('CommodityWare/UpdateWare', this.commodityWareModel);
				if(response.success) {
					this.handleGetCommodityWares();
					this.showCreateCommodityWareModal = false;
				}
			}
		});
	}
	handleDeleteCommodityWare(id) {
		this.confirm('确认要删除该产品库吗？', async () => {
			var response = await this.post('CommodityWare/DeleteWare', { id: id });
			if(response.success) {
				this.handleGetCommodityWares();
			}
		});
	}
	async handleSortUpCommodityWare(id) {
		var response = await this.post('CommodityWare/SortUpWare', { id: id });
		if(response.success) {
			this.handleGetCommodityWares();
		}
	}
	async handleSortDownCommodityWare(id) {
		var response = await this.post('CommodityWare/SortDownWare', { id: id });
		if(response.success) {
			this.handleGetCommodityWares();
		}
	}
	async handleGetCommodityWares() {
		var response = await this.get('CommodityWare/GetAllWares');
		if(response.success) {
			this.commodityWares = response.result;
		}
	}
	async created() {
		await this.handleGetCommodityWares();
	}

	
	selectedCommodityWareId:Number = null;
	showCreateParameterModal:Boolean = false;
	parameterFormRef:string = this.getRandomRef('Parameter-form');
	parameters:Array<any> = [];
	parameterModel:any = this.getDefaultParameterModel();
	getDefaultParameterModel() {
		return {
			name: '',
			displayName: '',
			commodityWareId: this.selectedCommodityWareId
		}
	}
	handleShowCreateParameterModal(item) {
		if(item == null) {
			this.parameterModel = this.getDefaultParameterModel();
		}else {
			this.parameterModel = Object.assign({}, item);
		}
		this.showCreateParameterModal = true;
	}
	handleCreateParameter() {
		this.parameterModel.name = this.parameterModel.displayName;
		this.validate(this.parameterFormRef, async () => {
			if(!this.parameterModel.id) {
				var response = await this.post('CommodityWare/CreateSpecificationParameter', this.parameterModel);
				if(response.success) {
					this.handleGetParameters();
					this.showCreateParameterModal = false;
				}
			}else {
				var response = await this.put('CommodityWare/UpdateSpecificationParameter', this.parameterModel);
				if(response.success) {
					this.handleGetParameters();
					this.showCreateParameterModal = false;
				}
			}
		});
	}
	handleDeleteParameter(id) {
		this.confirm('确认要删除该商品参数吗？', async () => {
			var response = await this.post('CommodityWare/DeleteSpecificationParameter', { id: id });
			if(response.success) {
				this.handleGetParameters();
			}
		});
	}
	async handleSortUpParameter(id) {
		var response = await this.post('CommodityWare/SortUpSpecificationParameter', { id: id });
		if(response.success) {
			this.handleGetParameters();
		}
	}
	async handleSortDownParameter(id) {
		var response = await this.post('CommodityWare/SortDownSpecificationParameter', { id: id });
		if(response.success) {
			this.handleGetParameters();
		}
	}
	async handleGetParameters() {
		var response = await this.get('CommodityWare/GetAllSpecificationParameters', { commodityWareId: this.selectedCommodityWareId });
		if(response.success) {
			this.parameters = response.result;
		}
	}
	async handleCommodityWareSelectChange(value) {
		await this.handleGetParameters();
	}
}
</script>